<template>
  <div class="history-node">
    <el-form label-position="top" :rules="rules" label-width="80px" :model="formData" ref='nodeForm' class="history-type-form">
      <el-form-item prop="historyPeriodType">
        <span slot="label" style="font-weight: bold">需要监测的时间周期</span>
        <el-select v-model="formData.historyPeriodType" placeholder="请选择" @change="changePeriodType">
          <el-option v-for="item in historyPeriodList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 自定义时间周期 - 限制方式 -->
      <div v-if="formData.historyPeriodType === 'customize'" class="diy-limit">
        <el-form-item prop="customTime">
          <el-input-number v-model="formData.customTime" :min="1" :max='99' placeholder="请输入" class="time-limit-count" :controls='false' :precision='0'></el-input-number>
        </el-form-item>
        <el-form-item prop="timeUnit">
          <el-select v-model="formData.timeUnit" placeholder="请选择" class="choose-time-unit">
            <el-option label="秒" value="second"></el-option>
            <el-option label="分钟" value="minute"></el-option>
            <el-option label="小时" value="hour"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="service-title">
        <span>在以上时间周期内，产品需要满足以下条件：</span>
      </div>

      <div class="service-list">
        <div v-for="(item, index) in formData.nodeList" :key="item.nodeId" class="service-item">
          <el-checkbox v-model="item.checked" @change="(val) => changeCheck(item, val)"></el-checkbox>
          <el-form-item :label="`${index + 1}. ${item.nodeName}`" :prop="'nodeList.' + index + '.nodeAction'" :rules="rules.nodeAction">
            <el-select v-if="item.checked" v-model="item.nodeAction" placeholder="请选择" class="back-select">
              <el-option v-for="item in historyStrategyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="count-limit">
        <span class="time-item-unit">选择了“已执行”的规则，在指定时间内，最多执行</span>
        <el-form-item prop="executeStrategyTimes">
          <el-input-number v-model="formData.executeStrategyTimes" :min="1" :max='99' placeholder="请输入" class="input-number choose-time-unit" :controls='false' :precision='0'></el-input-number>
        </el-form-item>
        <span class="time-item-unit skin">次</span>
      </div>

    </el-form>
  </div>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'
import RuleNodeBaseClass from '@/components/ruleNode/RuleNodeBaseClass'

import { HistoryPeriodTypeList, HistoryStrategyList } from './historyNode.model'
import { mapState } from 'vuex'

export default {
  name: 'AdvancedLibHistoricalNode',
  mixins: [RuleNodeBaseClass],
  props: {
  },
  data() {
    return {
      historyPeriodList: HistoryPeriodTypeList,
      historyStrategyList: HistoryStrategyList,
      formData: {
        historyPeriodType: 'currentStart',
        executeStrategyTimes: 1,
        customTime: undefined,
        timeUnit: 'minute',
        nodeList: []
      },
      rules: {
        // historyPeriodType: [{ required: true, message: ' ', trigger: 'change' }],
        executeStrategyTimes: [{ required: true, message: ' ', trigger: 'blur' }],
        customTime: [{ required: true, message: ' ', trigger: 'blur' }],
        timeUnit: [{ required: true, message: ' ', trigger: 'change' }],
        nodeAction: [{ required: true, message: ' ', trigger: 'change' }]
      }
    }
  },
  mounted() {
  },
  methods: {
    initValue() {
      const initFormData = this.initialForm ? deepClone(this.initialForm) : {}
      Object.assign(this.formData, initFormData)
      this.formData.nodeList = this.updateServer()
    },
    changePeriodType() {
      if (this.formData.historyPeriodType === 'customize') {
        this.formData.customTime = undefined
        this.formData.timeUnit = 'minute'
        this.formData.executeStrategyTimes = 1
      } else {
        this.formData.customTime = undefined
        this.formData.timeUnit = undefined
        this.formData.executeStrategyTimes = 1
      }
    },
    // 获取规则链所有自动触发节点并更新条件列表
    updateServer() {
      const autoTouchNodes = this.graph.getNodes().filter(node => node.getData().additionalInfo?.component === 'SceneLibAutoTouchNode')
      const nodeList = autoTouchNodes.map(node => {
        return {
          nodeName: node.data.name,
          nodeId: node.id,
          checked: false,
          nodeAction: 'ignore'
        }
      })
      // 已设置值覆盖
      this.formData.nodeList.forEach(item => {
        const newItem = nodeList.find(node => node.nodeId === item.nodeId)
        newItem && (newItem.nodeAction = item.nodeAction)
        if (newItem.nodeAction !== 'ignore') {
          newItem.checked = true
        }
      })
      return nodeList
    },
    getFormData() {
      return deepClone(this.formData)
    },
    changeCheck(item, val) {
      item.nodeAction = val ? 'true' : 'ignore'
    },
    validateForm() {
      let isValid
      this.$refs.nodeForm.validate(valid => { isValid = valid })
      return isValid
    }
  },
  computed: {
    ...mapState({
      graph: state => state.graph.graph
    })
  }
}
</script>
<style lang="scss">
.history-node {
  .service-title{
    padding: 8px 0;
    font-weight: bold;
    color: #1f1f1f;
  }
  .history-type-form{
    .el-form-item{
      margin-bottom: 8px;
    }
  }
  .diy-limit{
    display: flex;
    .el-form-item:nth-child(1){
      flex: 1;
    }
    .time-limit-count{
      width: 100%;
      .el-input__inner{
        text-align: left;
      }
    }
    .choose-time-unit{
      width: 100px;
    }
  }
  .input-number{
    width: 100%;
    .el-input__inner{
      text-align: left;
    }
  }
  .service-list{
    .service-item{
      display: flex;
      padding: 8px;
      margin-bottom: 8px;
      background-color: #f2f3f5;
      line-height: 35px;
      .el-checkbox{
        width: 25px;
        padding-left: 5px;
      }
      .el-form-item{
        flex: 1;
        display: flex;
        margin-bottom: 0;
        .el-form-item__label{
          flex: 1;
          padding-left: 4px;
          margin-bottom: 0;
      line-height: 35px;
          &::before{
            content: none;
          }
        }
      }
    }
  }
  .count-limit{
    display: flex;
    .time-item-unit{
      line-height: 32px;
      width: 312px;
      &.skin{
        width: 28px;
        text-align: center;
      }
    }
    .choose-time-unit{
      width: 100px;
    }
  }
}

</style>
